<template>
  <el-main>
    <Navbar></Navbar>
    <!--  条件栏  -->
    <el-row>
      <el-col :span="24">
        <el-input v-model="queryPageBean.queryString" placeholder="用户名/手机" style="width: 200px;"></el-input>
        <el-button @click="findPage(queryPageBean)">查询</el-button>
        <el-button type="primary" @click="handleAddPage()">新建</el-button>
      </el-col>
    </el-row>
    <!--    表格-->
    <Table :table-data="page.records" :table-head="tableHead" :operation="operation"></Table>
    <!--    分页组件-->
    <el-pagination
        align="right"
        @current-change="handleCurrentChange"
        :current-page="queryPageBean.currentPage"
        :page-size="queryPageBean.pageSize"
        layout="total, prev, pager, next, jumper"
        :total="page.total">
    </el-pagination>
    <!--    新建用户的页面-->
    <el-dialog title="新建用户" :visible.sync="dialogFormVisible">
      <!--   tag开始   -->
      <el-tabs value="first" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-form label-position="top">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名">
                  <el-input v-model="formData.username"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码">
                  <el-input v-model="formData.password"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="真实姓名">
                  <el-input v-model="formData.realName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别">
                  <el-select v-model="formData.gender">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话">
                  <el-input v-model="formData.telephone"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态">
                  <el-select v-model="formData.station">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生日">
                  <el-date-picker placeholder="选择日期" value-format="yyyy-MM-dd" v-model="formData.birthday" type="date"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注">
                  <el-input v-model="formData.remark" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!--   角色     -->
        <el-tab-pane label="所含角色" name="second">
          <el-row>
            <el-col :span="24">
              <el-input v-model="queryStringRole" size="mini" placeholder="名称/关键字" style="width: 100px;"></el-input>
              <el-button @click="findRoles" size="mini" >查询</el-button>
            </el-col>
          </el-row>
          <el-table
              size="mini"
              ref="multipleTable"
              :data="roles"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="keyword"
                label="关键字">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAdd">确 定</el-button>
      </div>
    </el-dialog>

    <!--    编辑用户的页面-->
    <el-dialog title="编辑用户" :visible.sync="dialogFormVisibleEdit">
      <!--   tag开始   -->
      <el-tabs value="first" type="card">
        <el-tab-pane label="基本信息" name="first">
          <el-form :data="formData" label-position="top">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="用户名" prop="username">
                  <el-input v-model="formData.username"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="密码" prop="password">
                  <el-input v-model="formData.password"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="真实姓名" prop="realName">
                  <el-input v-model="formData.realName"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="formData.gender">
                    <el-option label="男" value="1"></el-option>
                    <el-option label="女" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="电话" prop="telephone">
                  <el-input v-model="formData.telephone"/>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="状态" prop="station">
                  <el-select v-model="formData.station">
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="生日" prop="birthday">
                  <el-date-picker placeholder="选择日期" value-format="yyyy-MM-dd" v-model="formData.birthday" type="date"></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="备注" prop="remark">
                  <el-input v-model="formData.remark" type="textarea"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-tab-pane>
        <!--   角色     -->
        <el-tab-pane label="所含角色" name="second">
          <el-row>
            <el-col :span="24">
              <el-input v-model="queryStringRole" size="mini" placeholder="名称/关键字" style="width: 100px;"></el-input>
              <el-button @click="findRoles" size="mini" >查询</el-button>
            </el-col>
          </el-row>
          <el-table
              size="mini"
              ref="rolesTable"
              max-height="400"
              :data="roles"
              tooltip-effect="dark"
              style="width: 100%"
              @selection-change="handleSelectionChange">
            <el-table-column
                type="selection"
                width="55">
            </el-table-column>
            <el-table-column
                prop="name"
                label="名称">
            </el-table-column>
            <el-table-column
                prop="keyword"
                label="关键字">
            </el-table-column>
            <el-table-column
                prop="description"
                label="描述">
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="handleEdit">确 定</el-button>
      </div>
    </el-dialog>

  </el-main>
</template>

<script>
import Table from "@/components/Table.vue"
import { getUsers, addUser, editUser, getAllRoles, getRoleIdsByUserId } from "@/api"

export default {
  data() {
    return {
      // 设置树形菜单对应属性
      menuDefaultProps: {
        // 子节点的属性名称
        children: 'children',
        // 显示的名字
        label: 'title'
      },
      allMenuTree: [], // 树形结构的菜单
      tableHead: [],  // 表头
      operation: [],  // 操作
      queryPageBean: {  // 分页查询条件
        currentPage: 1, // 当前页
        pageSize: 10,   // 每页记录数
        queryString: '',// 查询条件
      },
      queryStringRole: '',
      dialogFormVisible: false, // 新增框显示
      dialogFormVisibleEdit: false, // 编辑框显示
      formData: { // 表单数据
        roleIds: [], // 绑定的菜单ID
      },
      page: {}, // 分页对象
      roles: [],
    }
  },
  watch: {
    // 监听查询条件变化
    'queryPageBean.queryString': {
      handler(newValue, oldValue) {
        this.queryPageBean.currentPage = 1 // 将页数设为1
      },
      immediate: true
    },
  },
  methods: {
    // 编辑
    handleEdit() {
      // 发送请求
      editUser(this.formData).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.dialogFormVisibleEdit = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 角色选中状态更改时的操作
    handleSelectionChange(val) {
      this.formData.roleIds = val.map(({id}) => id)
    },
    // 定义弹出新增页面需要做的事
    handleAddPage() {
      this.formData = {}
      this.findRoles() // 查询所有的角色
      this.dialogFormVisible = true
    },
    // 新增角色
    handleAdd() {
      // 发送请求
      addUser(this.formData).then((res) => {
        if (res.data.flag) {
          this.$message({
            message: res.data.message,
            type: 'success'
          })
          this.findPage()
          this.dialogFormVisible = false
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    // 查询用户
    findPage() {
      getUsers(this.queryPageBean).then((res) => {
        this.page = res.data.data
      })
    },
    // 查询角色
    findRoles() {
      return getAllRoles({
        queryString: this.queryStringRole
      }).then((res) => {
        this.roles = res.data.data
      })
    },
    // 当前页发生变化
    handleCurrentChange(val) {
      this.queryPageBean.currentPage = val
      this.findPage()
    },
  }
  ,
  created() {
    // 自定义操作
    this.operation = [
      {
        type: 'primary',
        name: '编辑',
        action: (row) => {
          // 查询所有的角色
          this.findRoles().then(() => {
            this.formData = row // 回显本行数据
            this.dialogFormVisibleEdit = true // 显示编辑框
            this.$nextTick(() => {
              getRoleIdsByUserId({
                id: row.id
              }).then((res) => {
                this.roles.forEach((role) => {
                  if (res.data.data.includes(role.id)) {
                    this.$refs.rolesTable.toggleRowSelection(role, true)
                  }
                })
              })
            })
          })
        },
        isDisabled: (row) => {
          return false
        }
      }, {
        type: 'danger',
        name: '删除',
        action: (row) => {
          console.log(row)
        },
        isDisabled: (row) => {
          return false
        }
      }
    ]
    // 自定义表头
    this.tableHead = [
      {
        name: '用户名',
        prop: 'username'
      },{
        name: '真实姓名',
        prop: 'realName'
      }, {
        name: '性别',
        prop: 'gender',
        diy: (row) => {
          if (row.gender === '1') {
            return '男'
          } else {
            return '女'
          }
        }
      }, {
        name: '电话',
        prop: 'telephone'
      }, {
        name: '状态',
        prop: 'station',
        diy: (row) => {
          if (row.station === '1') {
            return '<el-tag type="success">启用</el-tag>'
          } else {
            return '<el-tag type="danger">禁用</el-tag>'
          }
        }
      }, {
        name: '生日',
        prop: 'birthday'
      }, {
        name: '备注',
        prop: 'remark'
      },
    ]
    // 获取页面数据
    this.findPage()
  }
  ,
  components: {
    Table,
  }
}
</script>

<style lang="less">

</style>